<template>
  <div class="y-detail" @scroll="handleScroll($event)">
    <v-container class="col-24 y-container" style="background-color: #f0f0f0;">
      <div class="detail_home">
        <template v-for="data in jsonData">
          <h2 class="y-block y-detail-title" v-if="data.type == 'title'" v-html="data.text">
          </h2>
          <div class="y-block y-detail-pre" v-if="data.type == 'pre'">
            <mavon-editor :defaultOpen="prop.defaultOpen"
                          :editable="prop.editable"
                          :scrollStyle="prop.scrollStyle"
                          :subfield="prop.subfield"
                          :toolbarsFlag="prop.toolbarsFlag"
                          :value="data.text"/>
          </div>
          <div class="y-block y-detail-content" v-if="data.type == 'content'" v-html="data.text">
          </div>
          <div class="y-block y-detail-img" v-if="data.type == 'img'">
            <img :src="data.text">
          </div>
          <div class="y-block y-detail-explain" v-if="data.type == 'explain'" v-html="data.text">
          </div>
        </template>
        <valine :path="path"></valine>
        <span :id="path" class="leancloud_visitors" data-flag-title="Your Article Title" v-show="false">
            <em class="post-meta-item-text">阅读量 </em>
            <i class="leancloud-visitors-count"></i>
        </span>
      </div>
    </v-container>
    <goTop :home="home"></goTop>
  </div>
</template>
<script>
import valine from '@/components/valine';
import goTop from '@/components/goTop';

export default {
  name: "detail",
  components: {
    valine,
    goTop
  },
  data() {
    return {
      id: '',
      path: '',
      home: 'y-detail',
      context: '~~~java~~~',//输入的数据
      jsonData: [],
      prop: {
        subfield: false,// 单双栏模式
        defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false,
        toolbarsFlag: false,
        scrollStyle: true
      },
    }
  },
  created() {
    this.id = this.$route.query.id
    this.path = "/detail/" + this.id
    this.jsonData = require("@/json/json-"+this.id+".json");
  },
  mounted() {

  },
  methods: {
    toEditor(value) {
      console.log(value)
      this.context = value
      console.log(this.context)
    },
    handleScroll(e) {
      if (e.srcElement.scrollTop >= 300) {
        $('.goTop').css("right", "0px")
      }
      if (e.srcElement.scrollTop < 300) {
        $('.goTop').css("right", "-999px")
      }
    }
  }
}
</script>
<style>
.v-note-wrapper{
  min-height: 0px !important
}
.hljs {
  background: #e8e8e8 !important;
  border-radius: 6px !important;
}

.y-detail {
  background-color: #f0f0f0;
  background-color: rgb(240, 240, 240);
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

.detail_home {
  width: 70%;
  height: 100%;
  margin: auto;
  font-family: serif;
}

.y-block {
  width: 100%;
  display: inline-block;
}

.y-detail-pre {
  color: #afafaf;
  margin: 15px auto;
  letter-spacing: 0.5px;
  border-top: 41px solid #f19c9f;
}

.y-detail-content {
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  word-break: break-all;
  overflow: hidden;
  border-left: 8px solid #b5bcda;
  padding: 15px 20px;
  margin: 20px auto;
  line-height: inherit;
}

.y-detail-explain {
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  word-break: break-all;
  overflow: hidden;
  padding: 15px 20px;
  margin: 20px auto;
  line-height: inherit;
  background-color: #00ffe50f;
  font-size: 16px;
  font-family: fantasy;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px 0px;
  letter-spacing: 3px;
}

.y-detail-title {
  width: auto;
  display: block;
  padding: 15px 0px;
}

.y-detail-title::before {
  content: "#";
  padding-right: 10px;
  color: #6d9ee7;
}

.y-detail-img {
  width: auto;
  height: auto;
  text-align: center;
}

.y-detail-img img {
  width: 100%;
  height: auto;
}
</style>
